<template>
    <div id="simpleTree" class="simpleTree" >
        <ul :id="treeName" class="ztree"></ul>
    </div>
</template>

<script>
export default {
    name: 'simpleTree', // 不带编辑功能的Ztree
    components:{  },
    props: {
        treeData: { // 数据
            type: Array,
            default() {
                return [
                    {name: '加载中...', id: 'loading'},
                ]
            }
        },
        edit: { // 是否可编辑
            type: Boolean,
            default: false
        },
        pIdKey: { // 父级id
            type: String,
            default: 'parentId'
        },
        fontCss: { // 是否使用 自定义字体
            type: Boolean,
            default: false
        },
        expandAll: { // 是否展开所有节点
            type: Boolean,
            default: false
        },
        selectFirstNode: { // 是否默认选中第一个节点
            type: Boolean,
            default: false
        },
    },
    data() {
        return{
            treeName: 'treeDemo_simple' + new Date().getTime(),
            setting: {
                view: {
                    showIcon: false,
                    showLine: true,
                    selectedMulti: false,
                    fontCss: this.getFont, // 自定义字体
				    nameIsHTML: true
                },
                edit: {
                    enable: this.edit,
                    showRemoveBtn: false,
                    showRenameBtn: false
                },
                drag: {
                    autoExpandTrigger: true,
                    prev: this.dropPrev,
                    inner: this.dropInner,
                    next: this.dropNext
                },
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: this.pIdKey,
                        rootPId: 0
                    }
                },
                callback: {
                    onClick: this.zTreeOnClick,
                }
            },
            zNodes: [],
            log: '',
            className: 'dark',
            newCount: 1,
            curDragNodes: '',
            autoExpandNode: '',
            treeNodeMessage:'',        //节点信息
            addtreeNodeMessage:'',    //增加节点
            filterVal:'',
            active: {
                color: '#777777'
            },
            inactive: {
                color: '#F7BA2A'
            },
            canceled: {
                color: '#F56C6C'
            },
        }
    },
    methods:{
        dropPrev(treeId, nodes, targetNode) {
			var pNode = targetNode.getParentNode();
			if (pNode && pNode.dropInner === false) {
				return false;
			} else {
				for (var i=0,l=this.curDragNodes.length; i<l; i++) {
					var curPNode = this.curDragNodes[i].getParentNode();
					if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
						return false;
					}
				}
			}
			return true;
        },
        dropInner(treeId, nodes, targetNode) {
			if (targetNode && targetNode.dropInner === false) {
				return false;
			} else {
				for (var i=0,l=this.curDragNodes.length; i<l; i++) {
					if (!targetNode && this.curDragNodes[i].dropRoot === false) {
						return false;
					} else if (this.curDragNodes[i].parentTId && this.curDragNodes[i].getParentNode() !== targetNode && this.curDragNodes[i].getParentNode().childOuter === false) {
						return false;
					}
				}
			}
			return true;
        },
        dropNext(treeId, nodes, targetNode) {
			var pNode = targetNode.getParentNode();
			if (pNode && pNode.dropInner === false) {
				return false;
			} else {
				for (var i=0,l=this.curDragNodes.length; i<l; i++) {
					var curPNode = this.curDragNodes[i].getParentNode();
					if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
						return false;
					}
				}
			}
			return true;
        },
        // 以下为自己定义的方法
        zTreeOnClick(event, treeId, treeNode) {
            this.$emit('treeNodeClick',treeNode);
        },
        getFont(treeId, node) { // Ztree自定义字体
			return this.fontCss ? (node.status == 'ACTIVE' ? this.active : node.status == 'INACTIVE' ? this.inactive : this.canceled) : {};
		},
        expandAllNode() { // 展开全部节点
            if(this.expandAll) {
                setTimeout(() => {
                    const treeObj = $.fn.zTree.getZTreeObj(this.treeName);
                    treeObj.expandAll(true);
                }, 200);
            }
        },
        selectFirstNodeFun() { // 选中第一个节点
            if(this.selectFirstNode) {
                const treeObj = $.fn.zTree.getZTreeObj(this.treeName);
                let nodes = treeObj.getNodes();
                if (nodes.length>0) {
                    treeObj.selectNode(nodes[0]);
                }
            }
        },
        selectNode(id) { // 根据节点id 选中指定的节点
            const treeObj = $.fn.zTree.getZTreeObj(this.treeName);
            var node = treeObj.getNodesByFilter(function(node) {
                return node.id == id;
            }, true); // 仅查找一个节点
            if(node) {
                treeObj.selectNode(node);
            }
        },
    },
    watch: {
        treeData(val) {
            $.fn.zTree.init($("#" + this.treeName), this.setting, val);
            var zTree = $.fn.zTree.getZTreeObj(this.treeName);
            this.expandAllNode();
            this.selectFirstNodeFun();
        },
    },
    mounted() {
        this.$nextTick(() => {
            $.fn.zTree.init($("#" + this.treeName), this.setting, this.treeData);
            this.expandAllNode();
            this.selectFirstNodeFun();
        })
    }
}
</script>
<style lang="scss">
.simpleTree{
    position: relative;
    height: 100%;
    background: #fff;
    .ztree{
        height: 100%;
        overflow: auto;
        padding: 5px;
        li span.button.add{
            background-position: -143px 0;
        }
    }
}
</style>